<template>
  <div class="app-main-container">
    <div class="app-main-title">
      {{ mainName }}
      <div class="goback" @click="$router.replace(`/merchant/merchantAdmin`)">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <el-form ref="form" class="doumee-form" :model="param" label-width="140px" label-suffix="：" :rules="rules">
      <el-form-item label="商户名称" prop="name">
        <el-input v-model="param.name" maxlength="30" class="w400" placeholder="请输入商户名称" clearable />
      </el-form-item>
      <el-form-item label="商户类型" prop="shopTypeId">
        <el-select v-model="param.shopTypeId" class="w400" @change="changeType">
          <el-option v-for="item in shopsTypeList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <template v-if="param.shopTypeId === -1">
        <el-form-item label="关联角色" prop="roleId">
          <el-select v-model="param.roleId" class="w400" placeholder="请选择关联角色">
            <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联小程序模板" prop="templateId">
          <el-select v-model="param.templateId" class="w400" placeholder="请选择关联小程序模板">
            <el-option v-for="item in temList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="联系人" prop="contacts">
        <el-input v-model="param.contacts" maxlength="10" class="w400" placeholder="请输入联系人" clearable />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone ">
        <el-input v-model="param.phone" maxlength="20" class="w400" placeholder="请输入联系电话" clearable />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="email">
        <el-input v-model="param.email" maxlength="50" class="w400" placeholder="请输入联系邮箱" clearable />
      </el-form-item>
      <el-form-item label="所在地区" prop="provinceName">
        <div class="time-inline">
          <dh-area
            ref="foo"
            :sspvalue="address"
            :province="param.proName"
            :city="param.cityName"
            :area="param.areaName"
            :province-code="param.proCode"
            :city-code="param.cityCode"
            :area-code="param.areaCode"
            class="w400"
            @change="handleAreaChange($event)"
          />
        </div>
      </el-form-item>
      <el-form-item label="详细地址" prop="addr">
        <el-input v-model="param.addr" class="w400" placeholder="请输入详细地址" maxlength="200" clearable />
      </el-form-item>
      <el-form-item label="商务人员" prop="businessName">
        <el-input v-model="param.businessName" class="w400" placeholder="请输入商务人员" maxlength="200" clearable />
      </el-form-item>
      <div class="warnningTip"><i class="el-icon-warning-outline" />如果需要代注册小程序，以下内容为必填：</div>
      <el-form-item label="法人姓名" prop="juridicalName">
        <el-input v-model="param.juridicalName" class="w400" placeholder="请输入法人姓名" maxlength="20" clearable /><span class="tip-style">法人姓名与绑定微信银行卡的姓名一致</span>
      </el-form-item>
      <el-form-item label="法人微信号" prop="juridicalWx">
        <el-input v-model="param.juridicalWx" class="w400" placeholder="请输入法人微信号" maxlength="20" clearable />
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input v-model="param.enterpriseName" class="w400" placeholder="请输入" maxlength="50" clearable /><span class="tip-style">企业名称需与工商部门登记信息一致</span>
      </el-form-item>
      <el-form-item label="统一信用代码" prop="enterpriseCode">
        <el-input v-model="param.enterpriseCode" class="w400" placeholder="请输入" maxlength="100" clearable /><span class="tip-style">统一信用代码需与工商部门登记信息一致</span>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="param.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" class="w400" placeholder="请输入" maxlength="100" clearable /><span class="tip-style">统一信用代码需与工商部门登记信息一致</span>
      </el-form-item>
      <el-form-item label="附件">
        <div class="df_ac">
          <el-upload
            class="device-uploader"
            :action="uploadFileUrl"
            :data="uploadParam"
            :file-list="fileList"
            :on-remove="uploadImgDel"
            :limit="1"
            accept=".doc,.docx,.pdf,.word,.Word"
            :on-success="e => uploadSuccess(e)"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="placeholder9 ml10">建议上传PDF、Word文件</div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { insertShop, getShopBasicsInfo, updateShopInfo, getAbleShopsTypeList, getAbleMiniTem, shopRoleList } from '@/api'
import { uploadFile } from '@/api'
import DhArea from '@/components/DhArea'
export default {
  name: 'MerchantAdminEdit',
  components: {
    DhArea
  },
  data() {
    return {
      subLoading: false,
      param: {},
      address: [],
      shopsTypeList: [],
      temList: [],
      roleList: [],
      mainName: '新建商户',
      rules: {
        name: [{ required: true, message: '请输入场馆名称', trigger: 'blur' }],
        shopTypeId: [{ required: true, message: '请选择', trigger: 'change' }],
        roleId: [{ required: true, message: '请选择', trigger: 'change' }],
        templateId: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'SHOP_IMG'
      },
      fileList: []
    }
  },
  created() {
    if (this.$route.query.shopId) {
      this.mainName = '编辑商户'
      this.getDetail()
    }
    this.initConfig()
  },
  methods: {
    getDetail() {
      getShopBasicsInfo({
        param: { shopId: this.$route.query.shopId }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.param = res.record
        if (res.record.proName) {
          const a = res.record.proCode + '-' + res.record.proName
          const b = res.record.cityCode + '-' + res.record.cityName
          const c = res.record.areaCode + '-' + res.record.areaName
          this.address = [a, b, c]
        }
      })
    },
    initConfig() {
      getAbleShopsTypeList({ param: {}}).then(res => {
        this.shopsTypeList = [...res.recordList, { name: '无', id: -1 }]
      })
      this.getParamConfig()
    },
    getParamConfig() {
      getAbleMiniTem({ param: { status: '1' }}).then(res => {
        this.temList = res.recordList || []
      })
      shopRoleList({ param: { status: '1' }}).then(res => {
        this.roleList = res.recordList || []
      })
    },
    // 地点选择器
    handleAreaChange(area) {
      this.$set(this.param, 'proName', area[0].value)
      this.$set(this.param, 'proCode', area[0].label)
      this.$set(this.param, 'cityName', area[1].value)
      this.$set(this.param, 'cityCode', area[1].label)
      this.$set(this.param, 'areaName', area[2].value)
      this.$set(this.param, 'areaCode', area[2].label)
    },
    changeType(val) {
      const item = this.shopsTypeList.find(i => i.id === val)
      this.$set(this.param, 'roleId', item.roleId || '')
      this.$set(this.param, 'templateId', item.templateId || '')
    },
    onSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = { ...that.param }
          that.subLoading = true
          if (param.id) {
            updateShopInfo({ param })
              .then((res) => {
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success('编辑成功')
                  that.$router.replace(`/merchant/merchantAdmin?renovate=1`)
                }
              })
              .catch((er) => {
                that.subLoading = false
                console.log(er)
              })
          } else {
            insertShop({ param })
              .then((res) => {
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success('新增成功')
                  that.$router.replace(`/merchant/merchantAdmin?renovate=1`)
                }
              })
              .catch((er) => {
                that.subLoading = false
                console.log(er)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    uploadSuccess(reso) {
      console.log(reso)
      this.$set(this.param, 'fileUrl', reso.insertUrl)
    },
    uploadImgDel() {
      this.$set(this.param, 'fileUrl', '')
    }
  }
}
</script>
